import {reactive} from "vue"
//   校验用户名
export const validateUsername = (rule, value, callback) => {
    // 英文字母，数字，下划线或者短横线3-16位
    let reg =/^[a-zA-Z0-9-_]{3,16}$/
    console.log(value)
    if(reg.test(value)){
        // 验证通过
        callback()

    }else{
        // 验证不通过
        callback(new Error("必须为英文，字母数字，下划线或者短横线3-16位"))
    }
    
  }
//   校验密码框
 export const validatePassword = (rule, value, callback) => {
    if(value){
        callback()
    }else{
        // 密码为空
        callback(new Error("密码不能为空"))
    }
   
  }

  // 校验验证码
 export const validateCaptcha = (rule, value, callback) => {
    if(value.length<5){
        callback(new Error("验证码不能小于5位"))
    }else{
        callback()
    }
    
}

// 校验手机号
export const validatePhone=(rule,value,callback)=>{
  // 手机正则
  let reg=/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
  if(reg.test(value)){
    callback()
  }else{
    callback(new Error("手机号格式不正确"))
  }
}


// 校验验证码
export const validateCode=(rule,value,callback)=>{
  if(value.length<5){
    callback(new Error("验证码最少有五位"))
  }else{
    callback()
  }
}








//   校验规则
// 校验常规登入的验证规则
export const rules = reactive({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
    captcha: [{ validator: validateCaptcha, trigger: 'blur' }],
  })

//  校验手机登入的验证规则
export const messageRules=reactive({
  phone: [{ validator: validatePhone, trigger: 'blur' }],
   code: [{ validator: validateCode, trigger: 'blur' }],

})


  /**
   * 
   * @param {object} formEl 表单的引入对象
   * @param {funtion} succseeCallback 表单校验通过的回调函数
   * @param {funtion} faildCallback 表单校验失败的回调函数
   * @returns 
   */
  //   提交表单的时候
 export const useSubmitForm =(succseeCallback,faildCallback)=> (formEl) => {
    // formEl是里面的方法
    console.log(formEl)
    if (!formEl) return
    // 调用了组件提供的校验的方法
    formEl.validate((valid) => {
        // 如果所有表单的校验通过 valid就返回true 不通过返回false
      if (valid) {
        // 登入请求可以在这里发送
        if(succseeCallback){
            succseeCallback()
        }
        // console.log('submit!')
        
      } else {
        // console.log('error submit!')
        if(faildCallback){
            faildCallback(false)
        }
        return false
      }
    })
  }